<template>
  <div
    class="sticky"
    v-track
    event-type="exposure_article"
    :event-id="props.stickyArticle.id"
  >
    <div class="cover_tag">
      <b>
        <svg class="icon zhiding" aria-hidden="true">
          <use xlink:href="#icon-zhiding"></use>
        </svg>
        置顶
      </b>
    </div>
    <div class="sticky_thumbnail">
      <img v-lazy="props.stickyArticle.article_cover_url" />
      <span></span>
    </div>
    <div class="sticky_content">
      <div class="tag">
        <b
          ><i>{{ props.stickyArticle.type_name }}</i></b
        >
        <span v-for="item in props.stickyArticle.labels" :key="item.id"
          >#{{ item.name }}</span
        >
      </div>
      <h1 class="title" @click="toArticleDetail">
        {{ props.stickyArticle.article_title }}
      </h1>
      <div class="content">
        {{ formatSummary(props.stickyArticle.article_md_content) }}
      </div>
      <div class="time">{{ formatUtcTime(props.stickyArticle.createAt) }}</div>
    </div>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  import formatUtcTime from '@/utils/formatTime'
  import formatSummary from '@/utils/formatSummary'
  const router = useRouter()

  const props = defineProps({
    stickyArticle: {
      type: Object,
      default: () => {},
    },
  })
  const toArticleDetail = () => {
    router.push(`/article/${props.stickyArticle.id}`)
  }
</script>

<style lang="less" scoped>
  @media only screen and (min-width: 991px) {
    .sticky {
      position: relative;
      display: flex;
      width: 100%;
      height: 448px;
      background-color: var(--background-secondary);
      border-radius: 15px;
      overflow: hidden;
      transition: scale 0.2s ease-in-out;
      &:hover {
        .cover_tag {
          transform: translateY(-100%);
        }
        scale: (1.015);
      }
      .cover_tag {
        position: absolute;
        left: 24px;
        top: -8px;
        display: flex;
        align-items: flex-start;
        border-radius: 0.375rem;
        font-weight: 700;
        font-size: 14px;
        line-height: 20px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 5px;
        padding-bottom: 8px;
        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
          0 4px 6px -2px rgba(0, 0, 0, 0.05);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
          var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
        text-transform: uppercase;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform: translateX(var(--tw-translate-x))
          translateY(var(--tw-translate-y)) rotate(var(--tw-rotate))
          skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
          scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        background: var(--main-gradient);
        z-index: 200;
        transition: transform 200ms ease-in-out;
        b {
          border-radius: 4px;
          padding-top: 4px;
          padding-bottom: 4px;
          padding-left: 12px;
          padding-right: 12px;
          stroke: currentColor;
          --tw-text-opacity: 1;
          color: rgba(255, 255, 255, var(--tw-text-opacity));
          width: 100%;
          height: 100%;
          text-shadow: 0 2px 2px rgb(0 0 0 / 50%);
          background: rgba(0, 0, 0, 0.5);
        }
      }
      .sticky_thumbnail {
        flex: 1;
        height: 448px;
        img {
          position: absolute;
          background-repeat: no-repeat;
          background-size: cover;
          left: 0;
          width: 60%;
          height: 448px;
          object-fit: cover;
          z-index: 20;
        }
        span {
          position: absolute;
          left: 0;
          width: 60%;
          height: 448px;
          background: linear-gradient(
            130deg,
            rgb(36, 198, 220),
            rgb(84, 51, 255) 41.07%,
            rgb(255, 0, 153) 76.05%
          );
          z-index: 30;
          opacity: 0.4;
          mix-blend-mode: screen;
        }
        &:after {
          pointer-events: none;
          content: '';
          position: absolute;
          z-index: 35;
          left: 35%;
          top: 0;
          height: 100%;
          width: 26%;
          background: var(--gradient-cover);
        }
      }
      .sticky_content {
        flex: 1;
        position: relative;
        z-index: 50;
        padding: 30px;
        color: var(--text-normal);
        .tag {
          b {
            color: var(--text-accent);
            margin-right: 21px;
          }
          span {
            font-size: 16px;
            margin-right: 6px;
          }
        }
        .title {
          font-size: 36px;
          line-height: 40px;
          margin-top: 16px;
          margin-bottom: 32px;
          color: var(--text-bright);
          cursor: pointer;
        }
        .content {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
          word-wrap: break-word;
          word-break: break-all;
          font-size: 18px;
          line-height: 28px;
        }
        .time {
          font-size: 16px;
          margin-top: 24px;
        }
      }
    }
  }
  @media only screen and (max-width: 990px) {
    .sticky {
      position: relative;
      display: flex;
      flex-direction: column;
      background-color: var(--background-secondary);
      width: 100%;
      height: 380px;
      border-radius: 15px;
      overflow: hidden;
      .cover_tag {
        position: absolute;
        left: 5px;
        top: -8px;
        display: flex;
        align-items: flex-start;
        border-radius: 0.375rem;
        font-weight: 700;
        font-size: 14px;
        line-height: 20px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 5px;
        padding-bottom: 8px;
        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
          0 4px 6px -2px rgba(0, 0, 0, 0.05);
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
          var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
        text-transform: uppercase;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform: translateX(var(--tw-translate-x))
          translateY(var(--tw-translate-y)) rotate(var(--tw-rotate))
          skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
          scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        background: var(--main-gradient);
        z-index: 200;
        transition: transform 200ms ease-in-out;
        b {
          border-radius: 4px;
          padding-top: 4px;
          padding-bottom: 4px;
          padding-left: 12px;
          padding-right: 12px;
          stroke: currentColor;
          --tw-text-opacity: 1;
          color: rgba(255, 255, 255, var(--tw-text-opacity));
          width: 100%;
          height: 100%;
          text-shadow: 0 2px 2px rgb(0 0 0 / 50%);
          background: rgba(0, 0, 0, 0.5);
        }
      }
      .sticky_thumbnail {
        height: 25%;
        img {
          position: absolute;
          background-repeat: no-repeat;
          background-size: cover;
          top: 0;
          width: 100%;
          height: 60%;
          object-fit: cover;
          z-index: 20;
        }
        span {
          position: absolute;
          top: 0;
          width: 100%;
          height: 60%;
          background: linear-gradient(
            130deg,
            rgb(36, 198, 220),
            rgb(84, 51, 255) 41.07%,
            rgb(255, 0, 153) 76.05%
          );
          z-index: 30;
          opacity: 0.4;
          mix-blend-mode: screen;
        }
        &:after {
          pointer-events: none;
          content: '';
          position: absolute;
          z-index: 35;
          top: 25%;
          width: 100%;
          height: 35%;
          background: var(--article-cover);
        }
      }
      .sticky_content {
        height: 75%;
        position: relative;
        z-index: 50;
        padding: 24px;
        color: var(--text-normal);
        .tag {
          margin: 0;
          font-size: 24px;
          b {
            font-size: 30px;
            color: var(--text-accent);
            margin-right: 15px;
          }
          span {
            font-size: 16px;
            margin-right: 6px;
          }
        }
        .title {
          font-size: 18px;
          color: var(--text-bright);
        }
        .content {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
          word-wrap: break-word;
          word-break: break-all;
          font-size: 14px;
          line-height: 20px;
        }
        .time {
          font-size: 14px;
          margin-top: 20px;
        }
      }
    }
  }
</style>
